<template>
  <div class="common-step">
    <van-steps :direction="direction"  :active-icon="activeIcon"
      :active-color="activeColor" :active="0">
      <van-step v-for="(item, i) in stepsList" :key="i">
        <div class="step-title">
          <span>{{ item.processNodeNameFrom }}</span>
          <span>{{ item.approveTime }}</span>
        </div>
        <!-- 审核意见 -->
        <div class="step-item" style="display: flex">
          <div class="label">审核意见：</div>
          <div class="value">{{ item.statusName }}</div>
        </div>
        <div class="step-item">
          <div class="label ">审核备注：</div>
          <div class="value">
            {{ item.approveComment }}
          </div>
        </div>
        <div v-if="item.dataVerification" class="step-item">
          <div class="label">检查结果：</div>
          <div class="value">
            <div v-for="(item2, j) in JSON.parse(item.dataVerification)" :key="j">
              <span>
                {{ j + 1 + "、" + item2.name }}
              </span>
              <span :style="{ color: item2.approveStatus == 0 ? 'red' : '#00BFBF' }">
                {{ item2.approveStatus == 0 ? "不符合" : "符合" }}
              </span>
            </div>
          </div>
        </div>
      </van-step>
    </van-steps>
  </div>
</template>

<script>
import { Step, Steps } from 'vant';
export default {
  name: "",
  components: {
    'van-steps':Steps,
    'van-step':Step,
  },
  data() {
    return {};
  },
  props: {
    // 横向horizontal和 竖向vertical
    direction: {
      require: false,
      default: "horizontal",
    },
    // 当前节点
    activeStep: {
      require: true,
      type: Number,
      default: 0,
    },
    // 流程节点
    stepsList: {
      type: Array,
      require: true,
      default: () => {
        return [
          {
            title: "标题",
            content: "内容",
          },
          {
            title: "标题",
            content: "内容",
          },
          {
            title: "标题",
            content: "内容",
          },
        ];
      },
    },
    activeColor: {
      type: String,
    },
    activeIcon: {
      type: String,
      default: "",
    },
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.common-step {
  text-align: left;
  .step-title {
    display: flex;
    justify-content: space-between;
  }
  .label.d2 {
    letter-spacing: 2em;
    margin-right: -2em;
  }
  .step-item {
    margin-top: 20px;
  }
  .label {
    margin-right: 20px;
    position: relative;
  }
  //
  /deep/ .van-step--horizontal {
    display: flex;
  }
  /deep/ .stepsContent {
    color: #969799;
    font-size: 26px;
    margin: 5px 0;
    font-weight: normal;
    text-align: left;
  }
  /deep/ .van-icon-circle {
    width: 25px;
    height: 25px;
    border-radius: 25px;
    display: inline-block;
    background-color: #2184fe;
    position: relative;
  }
  /deep/ .van-icon-circle:before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #fff;
    position: absolute;
    border-radius: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
